<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<view>{{ number + 1 }}</view>
			<view>{{ ok ? 'yes' : 'no'}}</view>
			<view>{{ message.split('').reverse().join('') }}</view>
		</view>
		
		<view v-for="item in arr" style="color: #ff0000">
			{{item}}
		</view>
		
		<view v-for="(item,index) in 6" style="color: #00ff00;">
			<view :class="'list-' + index%2">{{index +2}}</view>
		</view>
		
		<view v-for="(value,name,index) in object">
			{{ index }}---{{name}}---{{value}}
		</view>
		
		<view v-for="item in arr" :key="item.id">
			<view style="color: #333300;">{{item.id}}:{{item.name}}</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'Hello',
				number:1,
				ok:true,
				message:'Hello Vue',
				arr:[{
					id:1,
					name:'uni-app'
				},
				{
					id:2,
					name:'HTML'
				},
				{
					id:3,
					name:'WeChat'
				},
				{
					id:4,
					name:'Android'
				}
				],
				object:{
					title:'How to do lists in Vue',
					author:'Jane Doe',
					publishedAt:'2025-10-1'
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style>
   .content {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	justify-content: center;
   }
   
   .logo {
   	height: 200rpx;
   	width: 200rpx;
   	margin-top: 200rpx;
   	margin-left: auto;
   	margin-right: auto;
   	margin-bottom: 50rpx;
   }
   
   .text-area {
   	display: flex;
   	justify-content: center;
   }
   
   .title {
   	
   	font-size: 36rpx;
   	color: #8f8f94;
   }
</style>
